<!--排名-->
<template>
    <div class="rank">
        <el-form>
            <el-form-item label="取值规则">
                <el-select size="mini" v-model="valueRule" @change="valueRuleHandle">
                    <el-option
                        v-for="item in valueRuleList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="字段来自">
                <el-select size="mini" v-model="numValue" @change="changePlaceholder">
                    <el-option
                        v-for="item in numValueList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-row class="group-method" v-show="valueRule === '3' || valueRule === '4'">
                <el-form-item label="分组方式">
                    <grouping-method ref="groupingMethod" @insertPlaceholder="getGroupMethod"></grouping-method>
                </el-form-item>
            </el-row>
            <el-form-item label="取值描述">
                <el-input type="textarea" rows="8" readonly style="width: 90%" :placeholder="placeholderValue" readonly></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import GroupingMethod from '../../../components/addRow/GroupingMethod'
    export default {
        name: 'Rank',
        components: {
            GroupingMethod
        },
        data () {
            return {
                valueRule: '', // 取值规则
                valueRuleList: [
                    {
                        value: '1',
                        label: '升序排名'
                    }, {
                        value: '2',
                        label: '降序排名'
                    }, {
                        value: '3',
                        label: '组内升序排名'
                    }, {
                        value: '4',
                        label: '组内降序排名'
                    }
                ], // 取值规则列表
                numValue: '', // 数值来自
                numValueList: [
                    // {
                    //     value: 'total',
                    //     label: '数量'
                    // }, {
                    //     value: 'costAmount',
                    //     label: '成本额'
                    // }, {
                    //     value: 'date',
                    //     label: '日期时间'
                    // }
                ],
                placeholderValue: '', // 文本域绑定值
                groupMethodValue: [], // 分组方式接收值
                prependVal: '',
                groupValue: '',
                columnInfo: [],
                tempList: [],
                selects: [],
                ordered: []
            }
        },
        props: {
            menuId: {
                type: String
            }
        },
        methods: {
            // 取值规则改变
            valueRuleHandle () {
                this.prependVal = ''
                this.getMethodValue()
                if (this.valueRule === '1') {
                    this.placeholderValue = ` 【${this.prependVal}】 由小到大在所有值中排名`
                } else if (this.valueRule === '2') {
                    this.placeholderValue = ` 【${this.prependVal}】 由大到小在所有值中排名`
                }
                let param = {
                    value1: this.valueRule,
                    value2: this.numValue,
                    text: this.placeholderValue,
                    selects: this.selects,
                    ordered: this.ordered,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                this.$emit('getRank', param)
            },
            saveColumnInfo (val) {
                this.columnInfo = val
                this.$refs.groupingMethod.getListData(val, '3')
                let tempList = this.columnInfo[0].children
                let tempList1 = this.columnInfo[2].children
                if (tempList.length > 0) {
                    tempList.forEach(item => {
                        this.numValueList.push({
                            name: item.name,
                            value: item.enName
                        })
                    })
                }
                if (tempList1.length > 0) {
                    tempList1.forEach(item => {
                        this.numValueList.push({
                            name: item.name,
                            value: item.enName
                        })
                    })
                }
                this.valueRule = '1'
                this.numValue = this.numValueList[0].value
                this.placeholderValue = `【${this.numValueList[0].name}】 由小到大在所有值中排名`
                let param = {
                    value1: this.valueRule,
                    value2: this.numValue,
                    text: this.placeholderValue,
                    selects: this.selects,
                    ordered: this.ordered,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                this.$emit('getRank', param)
            },
            // 编辑接收值
            editData (dataValue) {
                this.valueRule = dataValue.value1
                this.numValue = dataValue.value2
                this.placeholderValue = dataValue.text
                this.selects = dataValue.selects
                this.ordered = dataValue.ordered
                this.$refs.groupingMethod.editData(dataValue, '3')
            },
            changePlaceholder () {
                if (this.groupMethodValue.length === 0) {
                    this.prependVal = ''
                    this.getMethodValue()
                    if (this.valueRule === '1') {
                        this.placeholderValue = ` 【${this.prependVal}】 由小到大在所有值中排名`
                    } else if (this.valueRule === '2') {
                        this.placeholderValue = ` 【${this.prependVal}】 由大到小在所有值中排名`
                    }
                } else {
                    this.getMethodValue()
                    if (this.valueRule === '3') {
                        this.placeholderValue = `${this.groupValue}中的 【${this.prependVal}】 由小到大在所有值中排名`
                    } else if (this.valueRule === '4') {
                        this.placeholderValue = `${this.groupValue}中的 【${this.prependVal}】 由大到小在所有值中排名`
                    }
                }
                let param = {
                    value1: this.valueRule,
                    value2: this.numValue,
                    text: this.placeholderValue,
                    selects: this.selects,
                    ordered: this.ordered,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                this.$emit('getRank', param)
            },
            // 获取对应标签值
            getLabel (dataList, val) {
                let label = ''
                dataList.forEach(item => {
                    if (item.value === val) {
                        label = item.label
                    }
                })
                return label
            },
            // 根据对应方式生成拼接的标签值
            getMethodValue () {
                this.prependVal = this.getLabel(this.numValueList, this.numValue)
            },
            // 获取分组方式组件的值
            getGroupMethod (val) {
                debugger
                this.groupMethodValue = val.selects
                this.groupValue = ''
                for (let i = 0; i < this.groupMethodValue.length; i++) {
                    this.groupValue += ` 同一 【${this.groupMethodValue[i].name}】`
                }
                if (this.prependVal === '') {
                    this.prependVal = this.getLabel(this.numValueList, this.numValue)
                }
                if (this.groupMethodValue.length === 0) {
                    if (this.valueRule === '1') {
                        this.placeholderValue = ` 【${this.prependVal}】 由小到大在所有值中排名`
                    } else if (this.valueRule === '2') {
                        this.placeholderValue = ` 【${this.prependVal}】 由大到小在所有值中排名`
                    }
                } else {
                    if (this.valueRule === '3') {
                        this.placeholderValue = `${this.groupValue}中的 【${this.prependVal}】 由小到大在所有值中排名`
                    } else if (this.valueRule === '4') {
                        this.placeholderValue = `${this.groupValue}中的 【${this.prependVal}】 由大到小在所有值中排名`
                    }
                }
                this.selects = val.selects
                this.ordered = val.ordered
                let param = {
                    value1: this.valueRule,
                    value2: this.numValue,
                    text: this.placeholderValue,
                    selects: this.selects,
                    ordered: this.ordered,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                this.$emit('getRank', param)
            }
        },
        created () {
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .rank
        .el-form
            margin-top 10px
            .el-form-item
                margin-bottom 0px
            .group-method
                margin-bottom 10px

</style>
